// app/evcp/basic-contract-template/[id]/page.tsx
import * as React from "react"
import { notFound } from "next/navigation"
import { ArrowLeft, FileText, Download, Edit } from "lucide-react"
import Link from "next/link"
import { Metadata } from "next"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { formatDateTime } from "@/lib/utils"
import { getBasicContractTemplateByIdService, refreshTemplatePage } from "@/lib/basic-contract/service"
import { TemplateEditorWrapper } from "@/lib/basic-contract/template/template-editor-wrapper"

interface BasicContractTemplateDetailPageProps {
  params: Promise<{
    id: string
  }>
}

// 메타데이터 생성
export async function generateMetadata(props: BasicContractTemplateDetailPageProps): Promise<Metadata> {
  const params = await props.params;
  const template = await getBasicContractTemplateByIdService(params.id);
  
  if (!template) {
    return {
      title: "템플릿을 찾을 수 없음",
      description: "요청한 기본계약서 템플릿을 찾을 수 없습니다."
    };
  }

  return {
    title: `${template.templateName} (v${template.revision}) - 기본계약서 템플릿`,
    description: `${template.templateName} 템플릿의 상세 정보 및 편집 페이지입니다.`
  };
}

export default async function BasicContractTemplateDetailPage(props: BasicContractTemplateDetailPageProps) {
  const params = await props.params;
  const template = await getBasicContractTemplateByIdService(params.id);

  if (!template) {
    notFound();
  }

  // 페이지 새로고침 서버 액션
  const handleRefresh = async () => {
    "use server"
    await refreshTemplatePage(template.id.toString());
  };

  return (
    <div className="container mx-auto py-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Link href="/evcp/basic-contract-template">
            <Button variant="outline" size="sm">
              <ArrowLeft className="mr-2 h-4 w-4" />
              목록으로
            </Button>
          </Link>
          <div>
            <h1 className="text-2xl font-bold flex items-center">
              <FileText className="mr-2 h-6 w-6 text-blue-500" />
              {template.templateName}
              <Badge variant="outline" className="ml-2">
                v{template.revision}
              </Badge>
            </h1>
            <p className="text-muted-foreground">
              기본계약서 템플릿 상세 정보 및 편집
            </p>
          </div>
        </div>

        <div className="flex items-center space-x-2">
          {/* <DownloadButton 
            filePath={template.filePath} 
            fileName={template.fileName} 
          /> */}
        </div>
      </div>

      <div className="space-y-4">
        {/* 상단 - 기본 정보만 (최대한 압축) */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm">기본 정보</CardTitle>
          </CardHeader>
          <CardContent className="py-2">
            <div className="flex items-center space-x-6">
              <div className="flex items-center space-x-2">
                <label className="text-xs font-medium text-muted-foreground">상태:</label>
                <Badge variant={template.status === "ACTIVE" ? "default" : "secondary"} className="text-xs h-5">
                  {template.status === "ACTIVE" ? "활성" : "폐기"}
                </Badge>
              </div>
              
              <div className="flex items-center space-x-2">
                <label className="text-xs font-medium text-muted-foreground">버전:</label>
                <span className="text-xs font-medium">v{template.revision}</span>
              </div>
              
              <div className="flex items-center space-x-2">
                <label className="text-xs font-medium text-muted-foreground">법무검토:</label>
                <Badge variant={template.legalReviewRequired ? "destructive" : "secondary"} className="text-xs h-5">
                  {template.legalReviewRequired ? "필요" : "불필요"}
                </Badge>
              </div>
              
              <div className="flex items-center space-x-2">
                <label className="text-xs font-medium text-muted-foreground">파일:</label>
                <span className="text-xs">{template.fileName}</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 하단 - 파일 뷰어 (전체 너비, 높이 증가) */}
        <Card className="h-[950px]">
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <div>
                <CardTitle className="text-lg flex items-center">
                  <Edit className="mr-2 h-5 w-5 text-blue-500" />
                  템플릿 편집기
                </CardTitle>
                <CardDescription className="text-sm">
                  Word 문서를 편집하고 {'{{변수}}'} 를 설정할 수 있습니다.
                </CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent className="h-[calc(100%-80px)] p-0">
            <TemplateEditorWrapper
              templateId={template.id}
              filePath={template.filePath}
              fileName={template.fileName}
              refreshAction={handleRefresh}
            />
          </CardContent>
        </Card>
      </div>
    </div>
  );
}